import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { getBanners } from './../../../api';
import style from './../index.module.scss';
import './../index.module.scss';

class Com extends Component {
  state = {
    country : [
      '成都',
      '北京',
      '杭州',
      '海南',
      '厦门',
      '重庆',
      '广州',
      '三亚',
      '加拿大',
      '新加坡',
      '俄罗斯',
      '马尔代夫'],
    question : [
      {
        title: "4月底南法自驾，有什么风景可看吗？",
        content: "11天时间有点紧张，如果巴黎+圣山+南法。巴黎最少4天，圣山最少2天，南法最少4天，再加上中转…"
      }
    ],
    pathfinderList:[
      {img:"http://dummyimage.com/40x40", name:"蓝蓝的海", txt:"擅长...的问题"},
      {img:"http://dummyimage.com/40x40", name:"诺亚方舟", txt:"擅长...的问题"}
    ],
    botList:[
      {img:"http://dummyimage.com/345x130", title:"歌德曾说：“没有西西里，意大利的灵魂便不在。这里（西西里）是通往一切的密匙”。", txt:"这座热情岛屿的自然风光，无疑是让人最之倾倒的。蜿蜒的山脉和起伏的山丘，在冬夏两季流露出……"},
      {img:"http://dummyimage.com/345x130", title:"歌德曾说：“没有西西里，意大利的灵魂便不在。这里（西西里）是通往一切的密匙”。", txt:"这座热情岛屿的自然风光，无疑是让人最之倾倒的。蜿蜒的山脉和起伏的山丘，在冬夏两季流露出……"}
    ]
  }
  render() {
    return (
      <div >
        <div className={style.choiceness}>
          {
            this.state.country.map((item,index)=>{
              return (
                <NavLink to="/question/country" key={index} className={style.country} style={{color: '#333'}}>
                  {item}
                </NavLink>
              )
            })
          }
        </div>
        <div className={style.detail} >
          {
            this.state.question.map((item,index)=>{
              return (
                <NavLink to="/question/detail" key={index} className={style.country} style={{color: '#000'}}>
                  <h3>{item.title}</h3>
                  <p>{item.content}</p>
                </NavLink>
              )
            })
          }
        </div>
        <div>
          <h2 style={{margin:"0.2rem 0.2rem 0.1rem"}}>探路者</h2>
          <ul style={{
            display:"flex",
            justifyContent:"space-around"}}>
            {
              this.state.pathfinderList.map((item,index)=>{
                return (
                  <div key={index} 
                    style={{
                      width:"1.75rem",
                      height:"1.9rem",
                      background:"#fff",
                      textAlign:"center"
                    }}
                  >
                    <img src={item.img} alt="" style={{margin:"0.2rem"}}/>
                    <h3 >{item.name}</h3>
                    <p style={{margin:"0.1rem"}}>{item.txt}</p>
                    <span style={{color:"#00B145",border:"1px solid #00B145",padding:"0.02rem 0.1rem"}} >查看问答</span>
                  </div>
                )
              })
            }
          </ul>
        </div>
        <div style={{
          padding:"0.15rem",
          marginTop:"0.1rem",
          background:"#fff"
        }}>
          {
            this.state.botList.map((item,index)=>{
              return (
                <div key={index} style={{
                  marginBottom:"0.1rem"
                }}>
                  <img src={item.img} alt=""/>
                  <h3>{item.title}</h3>
                  <p>{item.txt}</p>
                </div>
              )
            })
          }
        </div>
      </div>
      
    );
  }
}

export default Com
